<template>
    <!-- 父盒子一定要加上高度 还有 overflow:scroll 加上 否则无法上拉加载 -->
   <div class="tmpl" style="height:573px;overflow:scroll">
       <nav-bar title="商品列表"></nav-bar>
       <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
        <ul class="mui-table-view mui-grid-view">
            <li v-for="(prod,index) in prods" :key="index" class="mui-table-view-cell mui-media mui-col-xs-6">
                <router-link :to="{name:'goods.detail',query:{id:prod.id}}">
                    <img class="mui-media-object" :src="prod.img_url" >
                    <div class="mui-media-body">{{prod.title}}</div>
                    <div class="desc">
                            <div class="sell">
                                <span>￥{{ prod.sell_price }}</span>
                                <s>￥{{ prod.market_price }}</s>
                            </div>
                            <div class="detail">
                                <div class="hot">
                                    热卖中
                                </div>
                                <div class="count">
                                    剩{{prod.rest}}件
                                </div>
                            </div>
                    </div>
                </router-link>
            </li>
        </ul>
       </mt-loadmore>
   </div>
</template>

<script>
   export default {
       data () {
       return {
           pageIndex: 1,
           prods: [],
           allLoaded: false,    // 是否禁止触发上拉函数
           isAutoFill: false    // 是否自动触发
       }
   },
   created(){
      this.loadMore();
   },
   methods: {
       loadBottom(){
            // console.log("触发上拉");
           this.loadmoreConcat();
       },
       loadMore(){
            // 默认加载时候是第一页 然后+1 下拉刷新调用就是第二页
            this.$ajax.get('goodslist/1')
            .then(res=>{
                this.prods = res.data.data
            })
            .catch(err=>{
                console.log(err)
            })
       },
       loadmoreConcat(){
            this.$ajax.get('goodslist/' + (this.pageIndex++))
            .then(res=>{
                this.prods = this.prods.concat(res.data.data);
                // 通知上拉操作已经完结
                this.$refs.loadmore.onBottomLoaded();
                if(res.data.data.length == 1){
                    this.allLoaded = true;      // 禁止调用上拉函数
                }
            })
            .catch(err=>{
                console.log(err)
            })
       }
   }
 }
</script>

<style scoped>

    .mui-table-view.mui-grid-view .mui-table-view-cell >a:not(.mui-btn){
        margin: 0px;
        padding: 0px;
        border: 1px solid #5C5C5C;
        box-shadow: 0 0 4px #666;
    }
    .sell >span{
        float: left;
        color: red;
        text-align: center;
    }
    .detail >.hot{
        float: left;
        text-align: left;
        font-size: 15px;
    }
    .detail >.count{
        float: right;
        text-align: right;
        font-size: 15px;
    }
    .detail{
        overflow: hidden;
    }
    .desc{
        color: rgba(92, 92, 92, 0.8);
        background-color: rgba(0, 0, 0, 0.2);
    }
    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{
        height: 260px;
    }
</style>
